<!-- src/components/PositionDetailDialog.vue -->
<template>
  <el-dialog
    :model-value="visible"
    :title="position?.title || '岗位详情'"
    width="600px"
    @update:model-value="$emit('update:visible', $event)"
  >
    <div v-loading="loading">
      <el-descriptions v-if="position" :column="1" border>
        <el-descriptions-item label="企业名称">{{ position.companyName }}</el-descriptions-item>
        <el-descriptions-item label="岗位标题">{{ position.title }}</el-descriptions-item>
        <el-descriptions-item label="部门">{{ position.department }}</el-descriptions-item>
        <el-descriptions-item label="工作地点">{{ position.workLocation }}</el-descriptions-item>
        <el-descriptions-item label="薪资范围">{{ position.salaryRange }}</el-descriptions-item>
        <el-descriptions-item label="工作类型">{{ getWorkTypeLabel(position.workType) }}</el-descriptions-item>
        <el-descriptions-item label="招聘人数">{{ position.recruitmentCount }}人</el-descriptions-item>
        <el-descriptions-item label="截止日期">{{ formatDate(position.deadline) }}</el-descriptions-item>
        <el-descriptions-item label="发布时间">{{ formatDate(position.createdAt) }}</el-descriptions-item>
        <el-descriptions-item label="岗位描述">{{ position.description }}</el-descriptions-item>
        <el-descriptions-item label="岗位要求">{{ position.requirements }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getPositionStatusType(position.status)">
            {{ getPositionStatusLabel(position.status) }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <div v-else class="empty">
        未找到岗位信息
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="$emit('update:visible', false)">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { commonApi } from '../api/common'
import { ElMessage } from 'element-plus'

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  positionId: {
    type: [String, Number],
    default: null
  }
})

// Emits
const emit = defineEmits(['update:visible'])

// Data
const position = ref(null)
const loading = ref(false)

// 获取岗位状态标签类型
const getPositionStatusType = (status) => {
  switch (status) {
    case 1: return 'success'  // 已发布
    case 0: return 'warning'  // 未发布
    default: return ''
  }
}

// 获取岗位状态标签文本
const getPositionStatusLabel = (status) => {
  switch (status) {
    case 1: return '已发布'
    case 0: return '未发布'
    default: return '未知'
  }
}

// 获取工作类型标签
const getWorkTypeLabel = (workType) => {
  switch (workType) {
    case 0: return '全职'
    case 1: return '兼职'
    case 2: return '实习'
    case 3: return '远程'
    default: return '未知'
  }
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  return new Date(dateString).toLocaleDateString()
}

// 获取岗位详情
const fetchPositionDetail = async () => {
  if (!props.positionId) return

  loading.value = true
  try {
    const response = await commonApi.getPositionDetail(props.positionId)
    position.value = response.data
  } catch (error) {
    ElMessage.error('获取岗位详情失败: ' + error.message)
  } finally {
    loading.value = false
  }
}

// 监听positionId变化
watch(() => props.positionId, (newId) => {
  if (newId && props.visible) {
    fetchPositionDetail()
  }
}, { immediate: true })

// 监听visible变化
watch(() => props.visible, (newVisible) => {
  if (newVisible && props.positionId) {
    fetchPositionDetail()
  } else if (!newVisible) {
    // 关闭时清空数据
    position.value = null
  }
})
</script>

<style scoped>
.empty {
  text-align: center;
  padding: 20px;
  color: #909399;
}
</style>
